<template>
	<section>

		<el-col :span="24" class="toolbar"  style="padding-bottom: 0px;">
			
			<el-form :inline="true" >				
				<el-form-item>
					<el-input  v-model="key" placeholder="输入查询的关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  @click="getList">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>			
		<el-tabs v-model="type"  type="card">
		    <el-tab-pane label="正在授课" name='1'></el-tab-pane>
		    <el-tab-pane label="等待授课" name='0'></el-tab-pane>
		    <el-tab-pane label="已完成授课" name='2'></el-tab-pane>
		</el-tabs>	
		<!--工具条-->		
		<el-table :data="Lists" highlight-current-row v-loading="loading" style="width: 100%;">		
			<el-table-column type="index" width='80'>
			</el-table-column>
			<el-table-column prop="name" label="课程名称" width="200">
			</el-table-column>
			<el-table-column prop="startTime" label="开课时间" width="200">
			</el-table-column>					
			<el-table-column label="课程简介" width="200">
		      <template scope="scope">
		        <el-popover trigger="hover" placement="top">
		          <div>课程简介: 	<div v-html="scope.row.intro "></div></div>
		          <div slot="reference" class="name-wrapper">
		            <el-tag>课程简介</el-tag>
		          </div>
		        </el-popover>
		      </template>
			</el-table-column>	
			<el-table-column prop="personCount" label="上课人数" width="200" >
			</el-table-column>		
			<el-table-column prop="teamCount" label="上课组数" width="200" >
			</el-table-column>			
			<el-table-column prop="realName" label="创建人"  width="200">
			</el-table-column>	
			<el-table-column prop="createTime" label="创建时间" width="200">
			</el-table-column>			
			<el-table-column prop="birth" min-width="200" label="操作" fixed="right">
				<template scope="scope">
					<el-button size="small"  type="primary" @click="skip('/courseinfo',scope.row.courseId,scope.row)" v-if="type!=0">进入课程</el-button>			
				</template>					
			</el-table-column>
		</el-table>
		<!--工具-->

	
	</section>
</template>
<script>
	import { courseStuself,coursecalender} from '../../api/api';
	import ComFunJS from '../../common/js/util'

	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				addFormVisible: false,//打分界面是否显示
				loading: false,
				dateloading:false,
				Lists: [],
				total:"",
				copyCourseId:"",
				Calendardate:"",
				pageSize:'10',
				page:'1',
				key:'',
				date:"",
				type:"1",
				isSelf:'1',
				datelist:[],
			}
		},
		watch:{
			'type':function(){
				this.getList();
			},
			'Calendardate':function(){
				this.getCalender()
			}
		},		
		methods: {
			sortChange:function(val){
				console.log(val)
			},
		    getCalender:function(){
		    	this.dateloading=true;
				let params={date:ComFunJS.getNowDate('yyyy-MM-dd',this.Calendardate),pageNum:1,pageSize:100};
				coursecalender(params).then((res) => {
					this.datelist = res.list;
					this.dateloading=false
					//NProgress.done();
				});				    	
		    },
			//页面跳转
		    skip(link,id,row){

			        this.$router.push(
			        	{
			        		path:link,
			        		query:{
			        			id:id,
			        		}
			        	}
			        )					
//			        this.$router.push(
//			        	{
//			        		path:'/stuseat',
//			        		query:{
//			        			id:id,
//			        		}
//			        	}
//			        )					
		        sessionStorage.setItem("course",JSON.stringify(row))
		    },	
			//页面跳转
		    copy(link,id){
		    	if(!this.copyCourseId){
					this.$message({
						message: '请选择要复制的课程',
						type: 'error'
					});		    	
					return;
		    	}
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        		}
		        	}
		        )
		    },		    
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},			    
			//获取项目列表
			getList: function (type) {
				this.loading = true;
				//NProgress.start();
				let params={pageNum:this.page,pageSize:this.pageSize,key:this.key,type:this.type};
				courseStuself(params).then((res) => {
					this.Lists = res;
					this.loading = false;
					//NProgress.done();
				});					
			},
		
		},	
		mounted() {
			this.getList();
		}
	};

</script>
<style type="text/css">
	.el-carousel__item .coursedate {
    color: #fff;
    font-size: 14px;
    height: 200px;
    margin: 0;
    text-align: center;
  }
  .el-carousel__item .coursedate h1{
  	font-weight: bold;
  }
  .el-carousel__item .coursedate .intro{
	 overflow : hidden;
	text-overflow: ellipsis;
	max-height:50px;
	width: 100%;
	white-space: nowrap;
	text-align: left;
  }
  .el-carousel__item:nth-child(2n) {
    background-color:#495A80;
    
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color:#20a0ff;
  }
</style>